@import 'ant-design-vue/dist/antd.less';
@import './variables.less';
@import './reset.less';

@val:0, 6, 8, 10, 12, 14, 16, 18, 20, 24, 30, 40, 50, 60;

each(@val, {
  //margin
  .mt-@{value} {
    margin-top:@value * 1px;
  }
  .mr-@{value} {
    margin-right:@value * 1px;
  }
  .mb-@{value} {
    margin-bottom:@value * 1px;
  }
  .ml-@{value} {
    margin-left:@value * 1px;
  }
  .mtb-@{value} {
    margin:@value * 1px 0;
  }
  .mlr-@{value} {
    margin:0 @value * 1px;
  }
  .m-@{value} {
    margin:@value * 1px;
  }

  //padding
  .pt-@{value} {
    padding-top:@value * 1px;
  }
  .pr-@{value} {
    padding-right:@value * 1px;
  }
  .pb-@{value} {
    padding-bottom:@value * 1px;
  }
  .pl-@{value} {
    padding-left:@value * 1px;
  }
  .ptb-@{value} {
    padding: @value * 1px 0;
  }
  .plr-@{value} {
    padding: 0 @value * 1px;
  }
  .p-@{value} {
    padding: @value * 1px;
  }
  
  .fs-@{value}{
    font-size:@value * 1px;
  }
});
.text-right {
  text-align: right;
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-auto {
  flex: auto;
}

.w-100 {
  width: 100%;
}

.vc-pointer {
  cursor: pointer;
}
